<template>
  <div class="page generatelist-page">
    <el-form
      size="small"
      :inline="true"
      v-if="showSearchBtn"
      class="query-form"
      ref="searchForm"
      :model="params"
      @keyup.enter.native="refreshList()"
      @submit.native.prevent
    >
      <!-- 搜索框-->
      <el-form-item
        v-for="(option, index) in dataBindFields.filter((field) => {
          return field.isSearch;
        })"
        :key="index"
        :prop="option.model"
      >
        <user-select
          v-if="option.type === 'user'"
          size="small"
          v-model="params[`${option.model}`]"
          @getValue="
            (value, label) => {
              params[`${option.model}`] = value;
            }
          "
        ></user-select>
        <SelectTree
          v-else-if="option.type === 'office'"
          size="small"
          v-model="params[`${option.model}`]"
          :props="{
            value: 'id', // ID字段名
            label: 'name', // 显示名称
            children: 'children', // 子级字段名
          }"
          :url="`/sys/office/treeData`"
          :clearable="true"
          :accordion="true"
          @getValue="
            (value) => {
              params[`${option.model}`] = value;
            }
          "
        />
        <SelectTree
          v-else-if="option.type === 'area'"
          size="small"
          v-model="params[`${option.model}`]"
          :props="{
            value: 'id', // ID字段名
            label: 'name', // 显示名称
            children: 'children', // 子级字段名
          }"
          :url="`/sys/area/treeData`"
          :clearable="true"
          :accordion="true"
          @getValue="
            (value) => {
              params[`${option.model}`] = value;
            }
          "
        />

        <el-select
          v-else-if="option.type === 'dict'"
          size="small"
          v-model="params[`${option.model}`]"
        >
          <el-option
            v-for="item in $dictUtils.getDictList(`${option.options.dictType}`)"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <!-- <el-rate
        v-else-if="option.type === 'rate'"
        v-model="params[`${option.model}`]"
        ></el-rate>-->
        <!-- <el-color-picker 
        v-else-if="option.type === 'color'"
        size="small"
        v-model="params[`${option.model}`]"
        ></el-color-picker>-->

        <!-- <el-select
        v-else-if="option.type === 'select'"
        v-model="params[`${option.model}`]"
      >
        <el-option v-for="item in (options.remote ? remoteOptions : options.options)" :key="item.value" :value="item.value" :label="options.showLabel || options.remote?item.label:item.value"></el-option>
        </el-select>-->

        <!-- <el-switch
        v-else-if="option.type === 'switch'"
        size = "small"
        v-model="params[`${option.model}`]"
      >
        </el-switch>-->
        <!-- <el-slider 
          v-else-if="option.type === 'slider'"
          size="small"
          v-model="params[`${option.model}`]"
        ></el-slider>-->
        <el-time-picker
          v-else-if="option.type === 'time'"
          size="small"
          :placeholder="option.name"
          v-model="params[`${option.model}`]"
        ></el-time-picker>
        <el-date-picker
          v-else-if="option.type === 'date'"
          size="small"
          :placeholder="option.name"
          v-model="params[`${option.model}`]"
        ></el-date-picker>
        <el-input
          v-else
          size="small"
          :placeholder="option.name"
          v-model="params[`${option.model}`]"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="refreshList()" size="small"
          >查询</el-button
        >
        <el-button @click="resetSearch()" size="small">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 导入导出-->
    <el-dialog title="导入Excel" :visible.sync="isImportCollapse">
      <el-form size="small" :inline="true" class="query-form" ref="importForm">
        <el-form-item>
          <el-button type="default" @click="downloadTpl()" size="small"
            >下载模板</el-button
          >
        </el-form-item>
        <el-form-item prop="loginName">
          <el-upload
            class="upload-demo"
            :action="$BASE_URL + `/form/generate/import`"
            :on-success="uploadSuccess"
            :headers="headers"
            :data="{
              formId: this.$route.query.id,
            }"
            :show-file-list="false"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只允许导入“xls”或“xlsx”格式文件！
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-dialog>
    <div
      class="bg-white"
      :style="showSearchBtn ? 'height:calc(100% - 76px)' : 'height:100%'"
    >
      <el-row style="margin-bottom: 10px">
        <el-button
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click="add()"
          >新建</el-button
        >
        <el-button
          type="warning"
          size="small"
          icon="el-icon-edit-outline"
          @click="edit()"
          :disabled="dataListSelections.length != 1"
          plain
          >修改</el-button
        >
        <el-button
          type="danger"
          size="small"
          icon="el-icon-delete"
          @click="del()"
          :disabled="dataListSelections.length <= 0"
          plain
          >删除</el-button
        >
        <el-button
          :disabled="dataListSelections.length != 1"
          v-for="(item, index) in options.config.actions.filter((action) => {
            return (
              action.position.indexOf('1') > -1 &&
              ($route.query.previewMode || !action.auth)
            );
          })"
          :key="index"
          size="small"
          icon="el-icon-link"
          @click="go(item)"
          >{{ item.name }}</el-button
        >
        <el-button-group class="pull-right">
          <el-button
            type="default"
            size="small"
            icon="el-icon-upload2"
            title="导入"
            @click="isImportCollapse = !isImportCollapse"
          ></el-button>
          <el-button
            type="default"
            size="small"
            icon="el-icon-download"
            title="导出"
            @click="exportExcel()"
          ></el-button>
          <el-button
            type="default"
            size="small"
            icon="el-icon-refresh"
            @click="refreshList"
          ></el-button>
        </el-button-group>
      </el-row>
      <el-table
        :data="dataList"
        size="small"
        @selection-change="selectionChangeHandle"
        @sort-change="sortChangeHandle"
        height="calc(100% - 80px)"
        v-loading="loading"
        class="table"
        ref="table"
      >
        <el-table-column
          type="selection"
          header-align="center"
          align="center"
          width="50"
        ></el-table-column>
        <el-table-column
          v-for="(option, index) in dataBindFields.filter((item) => {
            return item.isShow;
          })"
          :key="index"
          :prop="option.model"
          :show-overflow-tooltip="option.type !== 'editor'"
          :sortable="option.isSort ? 'custom' : false"
          :label="option.name"
        >
          <template slot-scope="scope">
            <div
              v-if="option.type === 'html'"
              v-html="scope.row[`${option.model}`]"
            ></div>
            <div v-else-if="option.type === 'color'">
              <el-color-picker
                disabled
                v-model="scope.row[`${option.model}`]"
              ></el-color-picker>
            </div>
            <div v-else-if="option.type === 'editor'" class="editorText">
              <p
                v-html="$utils.unescapeHTML(scope.row[`${option.model}`] || '')"
              ></p>
            </div>
            <div v-else-if="option.type === 'imgupload'">
              <el-image
                style="height: 50px; width: 50px; margin-right: 10px"
                :src="item.url"
                v-for="(item, index) in JSON.parse(
                  scope.row[`${option.model}`] || '[]'
                )"
                :key="index"
                :preview-src-list="
                  JSON.parse(scope.row[`${option.model}`]).map((item) => {
                    return item.url;
                  })
                "
              ></el-image>
            </div>
            <div v-else-if="option.type === 'fileupload'">
              <a
                :href="item.url"
                target="_blank"
                :key="index"
                v-for="(item, index) in JSON.parse(
                  scope.row[`${option.model}`] || '[]'
                )"
                >{{
                  decodeURIComponent(
                    item.url.substring(item.url.lastIndexOf("/") + 1)
                  )
                }}</a
              >
            </div>
            <div v-else-if="option.type === 'dict'">
              {{
                $dictUtils.getDictLabel(
                  `${option.options.dictType}`,
                  scope.row[`${option.model}`]
                )
              }}
            </div>
            <div v-else-if="option.type === 'selectTree'">
              <TreeSelectText
                size="small"
                v-model="scope.row[`${option.model}`]"
                :props="{
                  value: 'id', // ID字段名
                  label: 'name', // 显示名称
                  children: 'children', // 子级字段名
                }"
                :url="option.options.dataUrl"
                :clearable="true"
                :accordion="true"
              />
            </div>
            <div
              v-else-if="
                option.type === 'checkbox' && option.options.remote === 3
              "
            >
              <span
                :key="index"
                v-for="(item, index) in JSON.parse(
                  scope.row[`${option.model}`] || '[]'
                )"
              >
                {{
                  $dictUtils.getDictLabel(`${option.options.dictType}`, item)
                }}
                <span
                  v-if="
                    index + 1 !==
                      JSON.parse(scope.row[`${option.model}`] || '[]').length
                  "
                  >|</span
                >
              </span>
            </div>

            <div
              v-else-if="
                option.type === 'select' &&
                  option.options.remote === 3 &&
                  option.options.multiple
              "
            >
              <span
                :key="index"
                v-for="(item, index) in JSON.parse(
                  scope.row[`${option.model}`] || '[]'
                )"
              >
                {{
                  $dictUtils.getDictLabel(`${option.options.dictType}`, item)
                }}
                <span
                  v-if="
                    index + 1 !==
                      JSON.parse(scope.row[`${option.model}`] || '[]').length
                  "
                  >|</span
                >
              </span>
            </div>
            <div
              v-else-if="
                option.type === 'select' &&
                  option.options.remote === 3 &&
                  !option.options.multiple
              "
            >
              {{
                $dictUtils.getDictLabel(
                  `${option.options.dictType}`,
                  scope.row[`${option.model}`]
                )
              }}
            </div>

            <div
              v-else-if="option.type === 'radio' && option.options.remote === 3"
            >
              {{
                $dictUtils.getDictLabel(
                  `${option.options.dictType}`,
                  scope.row[`${option.model}`]
                )
              }}
            </div>
            <div v-else>
              <!-- <div v-if="index === 0">
                <el-link
                  type="primary"
                  :underline="false"
               
                  @click="edit(scope.row.id)"
                  >{{ scope.row[`${option.model}`] || '' }}</el-link
                >
                <el-link
                  type="primary"
                  :underline="false"
                
                  @click="view(scope.row.id)"
                  >{{ scope.row[`${option.model}`] || '' }}</el-link
                >
                <span v-else>{{
                  scope.row[`${option.model}`] === undefined
                    ? ''
                    : scope.row[`${option.model}`]
                }}</span>
              </div> -->
              <span>{{
                scope.row[`${option.model}`] === undefined
                  ? ""
                  : scope.row[`${option.model}`]
              }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          fixed="right"
          :key="Math.random()"
          width="200"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-view"
              size="mini"
              @click="view(scope.row.id)"
              >查看</el-button
            >
            <el-button
              type="text"
              icon="el-icon-edit"
              size="mini"
              @click="edit(scope.row.id)"
              >修改</el-button
            >
            <el-button
              type="text"
              size="mini"
              icon="el-icon-delete"
              @click="del(scope.row.id)"
              >删除</el-button
            >

            <el-button
              v-for="(item, index) in options.config.actions.filter(
                (action) => {
                  return (
                    action.position.indexOf('2') > -1 &&
                    ($route.query.previewMode || !action.auth)
                  );
                }
              )"
              :key="index"
              type="text"
              size="mini"
              icon="el-icon-link"
              @click="go(item, scope.row)"
              >{{ item.name }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageNo"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="total"
        background
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <GenerateForm
        ref="previewForm"
        @refreshDataList="refreshList"
      ></GenerateForm>
    </div>
  </div>
</template>
<script>
import GenerateForm from "./form";
import UserSelect from "./userSelect";
import SelectTree from "./treeSelect/treeSelect.vue";
import TreeSelectText from "./TreeSelectText.vue";
import { isURL } from "./validate";
import { downFile } from "@/libs/utils";
export default {
  data() {
    return {
      page: {
        currentPage: 1,
        total: 0,
        pageSize: 10,
      },
      params: {},
      title: "",
      tableName: "",
      dataList: [],
      options: { config: { actions: [] }, list: [] },
      dataListSelections: [],
      dataBindFields: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      orderBy: "",
      isImportCollapse: false,
      loading: false,
      headers: {
        token: sessionStorage.getItem("token"),
      },
    };
  },
  watch: {
    "$route.query": {
      handler(newVal, oldVal) {
        this.orderBy = "";
        this.params = {};
        let { title: newTitle, id: newId } = newVal;
        let { title: oldTitle, id: oldId } = oldVal;
        if (newId && newTitle !== oldTitle && newId !== oldId) {
          this.initData();
        }
      },
      deep: true,
    },
  },
  mounted() {
    this.initData();
  },
  components: {
    UserSelect,
    SelectTree,
    TreeSelectText,
    GenerateForm,
  },
  computed: {
    showSearchBtn() {
      let searchs = this.dataBindFields.filter((field) => {
        return field.isSearch;
      });
      return searchs.length > 0;
    },
    formId() {
      return sessionStorage.getItem("formId");
    },
  },
  methods: {
    initData() {
      this.$http({
        method: "get",
        url: `/form/make/queryById?id=${this.$route.query.id}`,
      }).then(({ data }) => {
        if (data.data.form.source) {
          this.options = JSON.parse(data.data.form.source);
        }
        this.tableName = data.data.form.tableName;
        this.dataBindFields = [];
        this.generateModel(this.options.list);
        this.dataBindFields.forEach((option) => {
          if (option.isSearch) {
            this.$set(this.params, option.model, undefined);
          }
        });
        this.refreshList();
        this.$nextTick(() => {
          this.$refs.table.doLayout();
        });
      });
    },
    generateModel(genList) {
      for (let i = 0; i < genList.length; i++) {
        if (genList[i].type === "grid") {
          genList[i].columns.forEach((item) => {
            this.generateModel(item.list);
          });
        } else if (genList[i].type === "tabs") {
          genList[i].tabs.forEach((item) => {
            this.generateModel(item.list);
          });
        } else {
          // 处理老版本没有dataBind值的情况，默认绑定数据
          if (genList[i].options.dataBind) {
            this.dataBindFields.push({
              model: genList[i].model,
              options: genList[i].options,
              name: genList[i].name,
              type: genList[i].type,
              isShow: genList[i].options.isShow,
              isSort: genList[i].options.isSort,
              isSearch: genList[i].options.isSearch,
            });
          }
        }
      }
      return this.dataBindFields;
    },
    selectionChange(list) {
      this.selections = list;
    },
    refreshList() {
      this.loading = true;
      this.$http({
        url: `/form/generate/list`,
        method: "post",
        data: {
          formId: this.$route.query.id,
          params: JSON.stringify(this.params),
          orderBy: this.orderBy,
          pageNo: this.pageNo,
          pageSize: this.pageSize,
        },
      }).then(({ data }) => {
        this.dataList = data.data.page.list;
        this.total = data.data.page.count;
        this.loading = false;
      });
    },
    // 跳转
    go(item, row) {
      row =
        row ||
        this.dataListSelections.map((item) => {
          return item.id;
        })[0];
      let keyValue = item.paramValue;
      if (/^[$]{.*}$/.test(item.paramValue)) {
        let keyName = item.paramValue.match(/[$]{[a-zA-Z0-9]*[.]+(\S*)}/)[1];
        keyValue = row[keyName];
      }
      if (isURL(item.link)) {
        this.$router.push({
          path: "/form/explorer",
          query: {
            title: item.name,
            iframeUrl: `${item.link}?${item.paramKey}=${keyValue}`,
          },
        });
      } else {
        this.$router.push({
          path: `${item.link}?${item.paramKey}=${keyValue}`,
          query: { title: item.name },
        });
      }
    },
    // 新增
    add() {
      this.$refs.previewForm.init("add", `${this.$route.query.id}`);
    },
    // 编辑
    edit(id) {
      id =
        id ||
        this.dataListSelections.map((item) => {
          return item.id;
        })[0];
      this.$refs.previewForm.init("edit", `${this.$route.query.id}`, id);
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageNo = 1;
      this.refreshList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNo = val;
      this.refreshList();
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },

    // 排序
    sortChangeHandle(obj) {
      if (obj.order === "ascending") {
        this.orderBy = obj.prop + " asc";
      } else if (obj.order === "descending") {
        this.orderBy = obj.prop + " desc";
      } else {
        this.orderBy = "";
      }
      this.refreshList();
    },
    // 查看
    view(id) {
      this.$refs.previewForm.init("view", `${this.$route.query.id}`, id);
    },
    del(id) {
      let ids =
        id ||
        this.dataListSelections
          .map((item) => {
            return item.id;
          })
          .join(",");
      this.$confirm(`确定删除所选项吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.loading = true;
        this.$http({
          method: "delete",
          url: "/form/generate/delete",
          params: { formId: this.$route.query.id, ids: ids },
        }).then(({ data }) => {
          this.loading = false;
          this.$message.success(data.info);
          this.refreshList();
        });
      });
    },
    // 导入成功
    uploadSuccess(res, file) {
      if (res.code == 0) {
        this.$message.success({
          dangerouslyUseHTMLString: true,
          message: res.info,
        });
        this.isImportCollapse = false;
        this.refreshList();
      } else if (res.code == 254) {
        sessionStorage.removeItem("token");
        sessionStorage.removeItem("user");
        this.$router.push("/login");
      } else {
        this.$message.error(res.info);
      }
    },
    // 下载模板
    downloadTpl() {
      downFile(`${this.$BASE_URL}/form/generate/import/template`, {
        formId: this.$route.query.id,
      });
    },
    exportExcel() {
      downFile(`${this.$BASE_URL}/form/generate/export`, {
        formId: this.$route.query.id,
        params: JSON.stringify(this.params),
        orderBy: this.orderBy,
      });
    },
    resetSearch() {
      this.$refs.searchForm.resetFields();
      this.refreshList();
    },
  },
};
</script>

<style>
.editorText {
  max-height: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
